<template>
	<view style="display: block;width: 100vw;height: 100vh;">

		<a-row v-if="reander" style="width:80%;height: 80;margin: 0 auto;">
			<a-col :span="3">
				<a-row v-for="(item,index) in infolist" class="ant-card-bordered" style="height: 20%;">
					<a-col :span="24">
						<a-typography-text>
							{{item[0]}}:
						</a-typography-text>
						<a-typography-text>
							<template v-if="item[1]!='gender'">
								<div class="card-box">
									{{userinfo[item[1]]}}
								</div>
							</template>
							<template v-else>

								<div class="card-box ">
									{{genderText[userinfo[item[1]]]}}
								</div>
							</template>

						</a-typography-text>
					</a-col>


				</a-row>
				<a-row style="height: 20%;" class="ant-card-bordered">

					<a-col :span="24">
						<a-typography-text>
							考试分数:
						</a-typography-text>
						<a-typography-text>
							{{realScore}}
						</a-typography-text>
					</a-col>
				</a-row>


				<a-row style="height: 20%;" class="ant-card-bordered">

					<a-col :span="24">
						<a-typography-text>
							考试用时:
						</a-typography-text>
						<a-typography-text>
							{{getTimesString}}
						</a-typography-text>
					</a-col>
				</a-row>
			</a-col>
			<a-col :span="21" style="height: 500rpx;" class="ant-card-bordered">
				<a-row style="height: 100%;width: 100%;">
					<a-col :span="24">
						<a-typography-text type="secondary" :style="getColor">
							仿真考试--{{cur_qs.s_id}}
						</a-typography-text>
					</a-col>


					<a-col :span="24">
						<a-typography-text style="text-align: left;line-height: 66rpx;" :style="getColor">
							{{currindexIndex+1}}. {{cur_qs.q_desc}}
						</a-typography-text>
					</a-col>
					<a-row class="maxwidth" style="margin-left: 12rpx;width: 100%;" v-for="(item,index) in cur_qs.q_struct"
						:style="getColor">

						<a-col :span="24">
							<a-typography-text :style="getColor" style="line-height: 66rpx;">
								{{label[index]}}. {{item.value}}
							</a-typography-text>
						</a-col>


					</a-row>
					<a-col :span="24">
						<a-typography-text v-if="getChangeAns().length>0">
							考生答案:
						</a-typography-text>
						<span style="color: red;font-size: 64rpx;" v-for="(item,index) in getChangeAns()">
							{{item}}
						</span>
						<a-typography-text style="margin-left: 32px;">
							标准答案:
						</a-typography-text>
						<span style="color: red;font-size: 64rpx;"
							v-for="(item,index) in textInfo[ quelist[currindexIndex].q_type].getAns( quelist[currindexIndex])">
							{{item}}
						</span>
					</a-col>
				</a-row>

			</a-col>

			<a-col :span="24">
				<uni-table border style="max-width: 100vw;overflow: scroll;">
					<uni-tr>
						<template v-for="(item,index) in th">
							<uni-th align="center">
								{{item.v}}
							</uni-th>
						</template>

					</uni-tr>
					<uni-tr v-for="(row,rindex) in getColumn">
						<block
							v-for="(item, index) in [{ansLabel:rindex+1,q_type:0},...quelist.slice(rindex*10,rindex*10+10)]"
							:key="item.s_id">

							<template v-if="item.q_type=='2'">
								<uni-td @click="skipQs(rindex * 10 + index)" :class="[{
									'color-error': item.isright == false,
									'color-right':item.isright || item.isright==undefined}]" align="center">{{getJump(item)}}
								</uni-td>
							</template>
							<template v-else>
								<uni-td @click="skipQs(rindex * 10 + index)" :class="[{
									'color-error': item.isright == false,
									'color-right':item.isright || item.isright==undefined}]" align="center">{{item.ansLabel}}</uni-td>
							</template>

						</block>

					</uni-tr>

				</uni-table>
			</a-col>
			<a-col :span="24">
				<a-row type='flex' justify="end" style="margin: 0;padding:0">
					<a-col>
						<a-button @click="getErrorList()">练习错题</a-button>
					</a-col>
					<a-col>
						<a-button @click="closeAll">返回首页</a-button>
					</a-col>
				</a-row>
			</a-col>
			<a-col :span="24">
				<view class="quesction-img-box" v-if="cur_qs.img && cur_qs.img.length>3">
					<view class="imageshow-box">
						<a-image class="imageshow" :src="`${$cdn}${cur_qs.img}`" height="250" :preview="true" />
					</view>
				</view>
			</a-col>
		</a-row>
	</view>
</template>

<script>
	
	import {
		mapGetters
	} from "vuex"
	import config from '@/admin.config.js'
	
	
	
	export default {
		data() {
			return {
				testTimes: {
					h: '00',
					i: '00',
					s: '00',
				},
				th: [{
					v: ''
				}, {
					v: '1'
				}, {
					v: '2'
				}, {
					v: '3'
				}, {
					v: '4'
				}, {
					v: '5'
				}, {
					v: '6'
				}, {
					v: '7'
				}, {
					v: '8'
				}, {
					v: '9'
				}, {
					v: '10'
				}],
				infolist: [
					['姓名', 'studentName'],
					['性别', 'gender'],
					['科目', 'subject'],
					['车型', 'drive'],
				],
				genderText: {
					0: '未知',
					1: '男',
					2: '女'
				},
				label: ['A', 'B', 'C', 'D', 'E', 'F'],
				textInfo: {
					"0": {
						"value": 0,
						"text": "单选",
						"color": "#0533fc",
						"label": ['A', 'B', 'C', 'D', 'E', 'F'],
						"tips": "提示操作：单选题",
						"getAns": function(cur_qs) {
							if (cur_qs.realProps) {
								return [cur_qs.realProps.realAns]
							} else {
								return '出现异常，联系管理员CODE:7701'
							}
						},
						labelAns: {
							'0': 'A',
							'1': 'B',
							'2': 'C',
							'3': 'D',
							'4': 'E',
							'5': 'F'
						}
					},
					"1": {
						"value": 1,
						"text": "多选",
						"color": "#ff0000",
						"label": ['A', 'B', 'C', 'D', 'E', 'F'],
						"tips": "提示操作：多项选择题",
						"getAns": function(cur_qs) {
							if (cur_qs.realProps) {
								return cur_qs.realProps.realAns.split('|')
							} else {
								return '出现异常，联系管理员CODE:7702'
							}
						},
						labelAns: {
							'0': 'A',
							'1': 'B',
							'2': 'C',
							'3': 'D',
							'4': 'E',
							'5': 'F'
						},
					},
					"2": {
						"value": 2,
						"text": "判断",
						"color": "#000000",
						"label": ['√', '×'],
						"tips": "提示操作：判断选择题",
						"getAns": function(cur_qs) {
							let label = {
								'A': '√',
								'B': '×'
							}
							return [label[cur_qs.q_ans]]
						},
						labelAns: {
							'0': '√',
							'1': '×',
						},
					},
				},

				quelist: [],
				qs_ans_arr: [],
				cur_qs: null,
				r_num: 0,
				e_num: 0,
				userinfo: null,
				currindexIndex: 0,
				realScore: 0,
				reander: false,
			}
		},
		onLoad() {
			const qinfo = uni.getStorageSync('mocktestinfo')
			this.quelist = qinfo.q
			this.e_num = qinfo.en,
				this.r_num = qinfo.rn,
				this.qs_ans_arr = qinfo.er
			this.userinfo = uni.getStorageSync('testpage')
			this.realScore = uni.getStorageSync('score')
			this.testTimes = uni.getStorageSync('usetimes')
			this.cur_qs = this.quelist[0]
			this.reander = true
			console.log(this.testTimes.h)
		},
		onUnload() {
			uni.removeStorageSync('mocktestinfo')
			uni.removeStorageSync('score')
			uni.removeStorageSync('usetimes')
		},
		
		onShow() {
			if(!this.isLogin){
				uni.showModal({
				    content: '登录状态失效，请重新登录',
				    showCancel: false,
				    success() {
				        uni.reLaunch({
				            url: config.login.url
				        })
				    }
				})
			}
		},
		computed: {
			...mapGetters({
				isLogin: 'user/isTokenValid'
			}),
			getTimesString() {
				console.log(`${this.testTimes.h}时:${this.testTimes.i}分:${this.testTimes.s}秒`)
				return `${this.testTimes.h}时:${this.testTimes.i}分:${this.testTimes.s}秒`
			},
			getColor() {
				return {
					color: this.textInfo[this.quelist[this.currindexIndex].q_type].color
				}
			},
			getColumn() {
				let size = this.quelist.length / 10
				if (size % Math.floor(this.quelist.length / 10) == 0) {
					return size
				} else {
					return Math.floor(this.quelist.length / 10) + 1
				}
			}

		},
		methods: {
			getJump(item) {
				console.log(item.hasOwnProperty('ansLabel'))
				if (item.hasOwnProperty('ansLabel')) {
					return item.ansLabel == '√' ? 'Y' : 'N'
				} else {
					return ''
				}
			},
			getErrorList() {
				const arr = []
				for (let row of this.quelist) {
					if (row.hasOwnProperty('showAns') == false && arr.includes(row.s_id) == false || row.isright != true) {
						arr.push(row.s_id)
					}
				}
				const data = {
					action: 'ERROR_LIST_ON_MOCK',
					studentName: this.userinfo.studentName,
					uid: this.userinfo.uid,
					drive: this.userinfo.drive,
					subject: this.userinfo.subject,
					cert: this.userinfo.cert
				}
				uni.setStorageSync('errlist', arr)
				this.$topage('/pages/exercise/testpage',
					data,
					'new', 'testpage', 'post')
			},
			closeAll() {
				uni.removeStorageSync('mocktestinfo')
				uni.removeStorageSync('score')
				uni.removeStorageSync('mocktestinfo')
				uni.redirectTo({
					url: '/pages/exercise/exercise'
				})
			},
			getChangeAns() {
				let arr = []
				this.quelist[this.currindexIndex].q_struct.forEach((e, i) => {
					if (this.qs_ans_arr[this.cur_qs.s_id] && this.qs_ans_arr[this.cur_qs.s_id].includes(e.index)) {
						arr.push(this.textInfo[this.quelist[this.currindexIndex].q_type]['labelAns'][`${i}`])
					}
				})
				return arr
			},
			skipQs(index) {
				this.currindexIndex = index - 1
				this.cur_qs = this.quelist[this.currindexIndex]
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('./errorlist.css');
</style>
